import { React, useState, useEffect, useRef } from 'react'
import { useNavigate } from "react-router-dom";
import { Swiper, Toast, Dialog } from 'antd-mobile'
import { Autoplay } from 'swiper/modules';
import { Swiper as ReactSwiper, SwiperSlide as ReactSwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/autoplay';
import { SoundOutline } from 'antd-mobile-icons'
import _ from 'lodash'
import './index.css'
import { useTranslation } from "react-i18next";
import {getInfo, profitApi, getService, getHomeData, getHeadList, celebrityListApi} from '../request/api'
import Tabber from '../copmonets/Tabber'
import axios from 'axios'
export default function Index() {
    const { t, i18n } = useTranslation();
    const throttle = _.throttle;
    const celebritysRef = useRef(null);
    let navigate = useNavigate();
    const [data, setData] = useState([])
    const [profit, setProfit] = useState([])
    const [badge, setBadge] = useState('')
    const [props, setProps] = useState([])
    const [openids, setOpenids] = useState('')
    const [severUrls, setSeverUrls] = useState('')
    const [imageList, setImageList] = useState([])
    const [items, setItems] = useState([])
    const [celebritys, setCelebritys] = useState([])
    const getdata = async () => {
        const res = await getInfo({});
        setData(res.data)
        if (res.data.openid !== '') {
            setOpenids(res.data.openid)
            setTimeout(() => {
                // gettest(res.data.openid)
            }, 10);
        }
        if (res.data.tx_switch == 0 && !localStorage.getItem('warning')) {
            Dialog.alert({
                title: t('t20'),
                confirmText: t('ty1'),
                onConfirm: () => {
                    localStorage.setItem('warning', false)
                },
                content: (
                    <div className='react_pop'>
                        <div>{res.data.tx_info}</div>
                    </div>
                ),
            })
        }
        if (res.data.tan_info == '' || res.data.tan_info == null) {

        } else {
            if (localStorage.getItem('tan')) {
                return false
            }
            Dialog.alert({
                title: 'notice',
                confirmText: "ok",
                onConfirm: () => {
                    localStorage.setItem('tan', false)
                },
                content: (
                    <div className='react_pop'>
                        <div>{res.data.tan_info}</div>
                    </div>
                ),
            })
        }
    }
    const getProfit = async () => {
        const res = await profitApi({})
        setProfit(res?.data?? [])
    }
    const getUrl = async () => {
        await getService({}).then(res => {
            setSeverUrls(res.data)
            if (res.data == '') {
                Toast.show({
                    icon: 'fail',
                    content: t('t21'),
                })
            } else {
                Toast.show({
                    icon: 'loading',
                    content: t('t4'),
                })
            }
        })
    }
    const gettest = (val) => {
        let timer = setInterval(setIntervalService(val), 5000)
        localStorage.setItem('time', timer)
    }
    const setIntervalService = (val) => {
        if (val != '') {
            axios({
                url: "https://www.let-talks.live/api/mobile/getNoRead",
                params: {
                    openid: val
                }
            }).then(res => {
                if (res.data.status == 200) {
                    setBadge(res.data.data.noRead)
                } else {
                    setBadge(0)
                }
            })
        }
    }
    const [loading, setLoading] = useState(false)
    const getData2 = async () => {
        const val = await getHomeData({})
        setLoading(true)
        val.data.cooperative = [
            {
                "img": "./assets/upload/0c/3138d9a0779f3415b52568e83d10b9.png",
                "url": "https://www.binance.com",
                "type": "#",
                "title": "#"
            },
            {
                "img": "./assets/upload/f2/1db0a35514a4aa7a0159409a8e5659.jpg",
                "url": "https://www.okx.com",
                "type": "#",
                "title": "#"
            },
            {
                "img": "./assets/upload/2c/d22c1974c538e1154364b8417c65b4.jpg",
                "url": "https://www.ebay.com",
                "type": "#",
                "title": "#"
            },
            {
                "img": "./assets/upload/c4/e5833131dd6c9724fed5ac12bc9064.jpg",
                "url": "https://www.amazon.com",
                "type": "#",
                "title": "#"
            },
            {
                "img": "./assets/upload/7e/4588e7e7bfca7d44590754a5cfa5f9.jpg",
                "url": "https://www.alibaba.com",
                "type": "#",
                "title": "#"
            },
            {
                "img": "./assets/upload/df/dbb8c99870fe42733780b07ef87440.jpg",
                "url": "https://www.bestbuy.com",
                "type": "#",
                "title": "#"
            },
            {
                "img": "./assets/upload/a9/dbdb740acdc3dca4704378a672ce2e.jpg",
                "url": "https://www.shopify.com",
                "type": "#",
                "title": "#"
            },
            {
                "img": "./assets/upload/95/d96b1a83af150bfeb05359788c195e.jpg",
                "url": "https://www.walmart.com/",
                "type": "#",
                "title": "#"
            },
            {
                "img": "./assets/upload/f4/6c74fcc64d65fac1dcad53c485ff06.jpg",
                "url": "https://www.groupon.com/",
                "type": "#",
                "title": "#"
            },
            {
                "img": "./assets/upload/18/5727aa59c48f21aaf9311fa3da4f06.jpg",
                "url": "https://ir.homedepot.com/",
                "type": "#",
                "title": "#"
            },
            {
                "img": "./assets/upload/65/780b02898034e65f8e9b5facedbf19.jpg",
                "url": "https://www.zalando.com/",
                "type": "#",
                "title": "#"
            },
            {
                "img": "./assets/upload/28/ac37692f2ed7c5720147e7e4c471d1.jpg",
                "url": "https://m.lotte.co.kr/",
                "type": "#",
                "title": "#"
            }
        ]
        setProps(val.data)
        setItems(val.data.banner)
        // const result = [];
        // for (let i = 0; i < 2; i++) {
        //     result.push(val.data.cooperative.slice(i * 6, (i + 1) * 6));
        // }
        // setPartnerData(result)
    }

    const getImageList = async ()=>{
        const res = await getHeadList({})
        setLoading(true)
        setImageList(res.data)
    }
    const firend = (url) => {
        if (url == '#') {
            Toast.show({
                icon: 'fail',
                content: t('t21'),
            })
        } else {
            window.open(url);
        }
    }
    const getCelebrityList = async ()=>{
        const res = await celebrityListApi({})
        setCelebritys(res.data)
    }
    useEffect(() => {
        getdata()
        getData2()
        getProfit()
        // getUrl()
        getImageList()
        getCelebrityList()
    }, [])
    const ref = useRef(null)
    // const banner = [{
    //     img: "./assets/index/banner1.jpg"
    // },
    // {
    //     img: "./assets/index/banner2.jpg"
    // },
    // {
    //     img: "./assets/index/banner3.png"
    // }]
    const severUrl = () => {
        // window.open(data.miitbeian)
        // window.open('https://www.baidu.com/')
        Dialog.alert({
            // content: t('t29') + `${data.kf}`,
            content:`${props.kf}`,
        })
    }

    useEffect(() => {
        return () => {
            clearInterval(localStorage.getItem('time'))
            localStorage.removeItem('time');
        }
    }, [])
    return (
        <div className='index_all'>
            <div className='header'>
                <img src="./assets/index/ebay2.png" alt=""/>
            </div>
            <div className="home_earnings">
                <p>{t('s1')}</p>
                <div className='user_money'>
                    <img src="./assets/index/usdt.svg"></img>
                    <p>{data.sum_commission}</p>
                    <p>USDT</p>
                </div>
            </div>
            <div className='banner'>
                <Swiper indicatorProps={{
                    color: 'white',
                }} style={{
                    '--border-radius': '8px',
                }} loop autoplay>
                    {
                        items.map((item, index) => {
                            return (
                                <Swiper.Item key={index}>
                                    <div className='swiper_item'>
                                        <img src={item.image} alt="" key={index}/>
                                    </div>
                                </Swiper.Item>
                            )
                        })
                    }
                </Swiper>
            </div>
            <div className='notice'>
                {!!profit.length &&
                    <Swiper autoplay indicator={() => null} direction='vertical' style={{'--height': '36px'}}>
                        {
                            profit.map((item, index) => {
                                return (
                                    <Swiper.Item key={index}>
                                        <div className='notice_swper' >
                                            <SoundOutline fontSize={18}/>
                                            <div className='notice_swper-content'>
                                                <span>{item.username}</span>
                                                <span>{item.num}</span>
                                            </div>
                                        </div>
                                    </Swiper.Item>
                                )
                            })
                        }
                    </Swiper>}
            </div>
            <div className='index_sever'>
                <h3>{t('s6')}</h3>
                <div className='sever_model'>
                    <div className='about_help'>
                        <div className='ah_model about' onClick={() => {
                            navigate('/About')
                        }}>
                            <p>{t('s3')}</p>
                        </div>
                        <div className='ah_model help' onClick={() => {
                            navigate('/Help')
                        }}>
                            <p>{t('s4')}</p>
                        </div>
                    </div>
                    <div className='sever' onClickCapture={severUrl}>
                        <p>{t('s2')}</p>
                        {badge != 0 && <p className='setBadge'>{badge > 100 ? '99+' : badge}</p>}
                    </div>

                </div>
            </div>
            <div className='teamwork'>
                <h3>{t('s5')}</h3>
                {/*<img src={item.img} alt="" key={index} onClick={() => { firend(item.url) }} />*/}
                {loading && <div className='icon_banner'>
                    {
                        props.cooperative?.map((item, index) => {
                            return (
                                <img src={item.img} alt="" key={index} onClick={() => {
                                    firend(item.url)
                                }}/>
                            )
                        })
                    }
                </div>}
            </div>
            <div className='teamwork'>
                <h3>{t('s7')}</h3>
                <div className="swiper-box">
                    {<ReactSwiper
                        style={{height: '200px'}}
                        modules={[Autoplay]}
                        direction={'vertical'}
                        slidesPerView={5}
                        loop={true}
                        autoplay={true}>
                        {celebritys.map((item, index) => {
                            return (
                                <ReactSwiperSlide key={index}>
                                    <div className='celebritys_item'>
                                        <span>{item.username}</span>
                                        <span>{item.title}</span>
                                        <span>{item.num}</span>
                                    </div>
                                </ReactSwiperSlide>
                            )
                        })}
                    </ReactSwiper>}
                </div>

            </div>
            <div style={{height: '80px'}}></div>
            <Tabber></Tabber>
        </div>
    )
}
